<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上拉加载、下拉刷新</title>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>-->
	<!-- 引入样式文件 -->
	<link
	  rel="stylesheet"
	  href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
	/>

	<!-- 引入 Vue 和 Vant 的 JS 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
	<style>
	.container {
		height: 100vh;
	}
	
	.container .list {
        width: 100%;
        height: 56px;
        padding: 0 3%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        background-color: #ffffff;
        font-size: 14px;
        color: #b2b2b2;
        border-bottom: 1px solid #f7f7f7;        
    }
	.list-left span {
		display: block;			
	}
	.list-left span:first-child {
		color: #181947;
		font-size: 16px;
		line-height: 24px;
	}
	.list-right span {
		display: block;			
	}
	.list-right span:first-child {
		color: #181947;
		font-size: 16px;
		line-height: 24px;
		text-align: right;
	}
	</style>
</head>
<body>
    <div id="app">
    </div>
    <script>
		const mockData = []; // 模拟分页数据
		for (let i = 0; i < 130; i++) {
			let obj = {
				mark: ['用户提现', '报单扣除', '积分兑换'][i % 3] + '_' + i,
				created_at: '2021-03-09 09:33:30',
				money: [20.00, 10.00, 1.00, -1.00, -20.00, -5.00][i % 6]
			}
			mockData.push(obj)
		}
		let totalPage = Math.ceil(mockData.length / 20)
		console.log(mockData, totalPage);

		function getData(page) {
			let curPageData = []
			if (page <= totalPage) {
				let start = (page - 1) * 20
				let end = page * 20 - 1;
				if (end >= mockData.length - 1) { end = mockData.length - 1 }
				for (let j = start; j <= end; j++) {
					curPageData.push(mockData[j])
				}
			}
			return {
				code: 200,
				data: curPageData,
				msg: '获取成功'
			}
		}

		console.log(getData(7))
	  // 在 #app 标签下渲染一个按钮组件
	  new Vue({
		el: '#app',
		template: `
			<div class="container">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				  <van-list
					v-model="loading"
					:finished="finished"
					:immediate-check="false"
					finished-text="没有更多了"
					@load="onLoad"
				  >
					<div class="list" v-for="(item,index) in list" :key="index">
					  <div class="list-left">
						<span>{{item.mark}}</span>
						<span>{{item.created_at}}</span>
					  </div>
					  <div class="list-right">
						<span class="red">{{item.money}}</span>
					  </div>
					</div>
				  </van-list>
				</van-pull-refresh>
			</div>
		`,
		data() {
			return {
				list: [],
				page: 1, //页码
				loading: false, //上拉加载
				finished: false, //上拉加载完毕
				refreshing: false //下拉刷新
			};
		},
		created: function () {
			this.record();
		},
		methods: {
			// 列表
			record() {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						let _this = this;
						let response = getData(this.page)
						console.log('下拉后的数据', this.page, response);
						if (response.code == 200) {
							if (response.data.length > 0) {
								if (_this.page > 1) {
									if (_this.loading) {
										if (response.data.length < 20) {
											_this.list = _this.list.concat(response.data);
											_this.finished = true;  //完成加载
										} else {
											_this.list = _this.list.concat(response.data);
											_this.finished = false;  //加载中
										}
									}
								} else {
									if (response.data.length < 20) {
										_this.list = response.data; //第一次加载
										_this.finished = true;  //完成加载
									} else {
										_this.list = response.data; //第一次加载
									}
								}
							} else {
								_this.finished = true;
							}
						} else {
							_this.$toast(response.msg);
						}
						
						// 加载状态结束
						this.loading = false;
						resolve();
					}, 2000)
				})				
			},
			// 上拉加载
			onLoad() {
				this.page++;
				this.record().then(()=>{});
			},
			// 下拉刷新
			onRefresh() {
			  this.page = 1;
			  this.finished = false;
			  this.record().then(() => {
				this.refreshing = false;
				this.$toast('刷新成功');
			  });			  
			}
		}
	  });
	</script>
</body>
</html>